<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>

<body>

    <div id="info"></div>
    <script type="text/javascript" src="./lib/jquery.js"></script>
    <script src="./lib/template-web.js"></script>
    <script id='demo' type='text/html'>
        <!-- //需要加上属性名 type='text/html'，否则下面的内容会乱码 -->
        <div>
            <div>姓名：{{uname}}</div>
            <div>年龄：{{age}}</div>
            <!-- 在调用值前加上@，则系统会识别标签，类似html与text的区别 -->
            <div>身高：{{@height}}</div>
            <!-- 模板引擎还有if功能，下面是语法 -->
            {{if gender === 1}}
            <div>性别：男</div>
            {{else if gender === 2}}
            <div>性别：女</div>
            {{else}}
            <div>性别：不确定</div>
            {{/if}}
            <!-- 模板引擎中的数据还可以用函数来筛选（过滤器），下面是语法 -->
            <div>最大值：{{arr | max}} </div>
            <div>昵称：{{nickname | changeinfo}} </div>
            <!-- 列表渲染  （遍历数据并打印）-->
            {{each hobby}}
            <div>爱好{{$index}}：{{$value}} </div>
            {{/each}}

        </div>
    </script>
    <script type="text/javascript">
        var userInfo = {
                uname: '张三',
                age: 12,
                gender: 2,
                height: '<h1> 181 </h1>',
                arr: [1, 2, 45, 87, 95, 2, 1125],
                hobby: ['吸烟', '喝酒', '烫头', '吃饭', '睡觉', '打豆豆'],
                nickname: 'doudou'
            }
            // 模板引擎中的数据还可以用函数来筛选（过滤器），下面是语法
        template.defaults.imports.max = function(arr) {
            var maxarr = Math.max.apply(null, arr);
            return maxarr
        };
        template.defaults.imports.changeinfo = function(string) {
            // var firstword = string.charAt(0).toUpperCase();
            // var otherword = string.substr(1);
            // return firstword + otherword
            // 另一种写法
            string = string.replace(string[0], string[0].toUpperCase());
            return string
        }

        var str = template('demo', userInfo)
        $('#info').html(str)
    </script>
</body>

</html>